<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>个人主页</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-100 to-purple-100 min-h-screen flex items-center justify-center p-4">

  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 space-y-8">
    <div class="flex flex-col items-center space-y-4">
      <img src="./shuai.jpg" alt="头像"
        class="w-24 h-24 rounded-full border-4 border-blue-300 shadow-md object-cover" />
      <h1 class="text-3xl font-bold text-gray-800">阿狗13</h1>
      <p class="text-gray-500 text-center">白石洲第一犟种 / 四平八稳 / 币子专家”</p>
    </div>

    <div class="flex flex-col space-y-4">
      <a href="#about" onclick="alert('我是白石洲第一美男，但没有华利帅，他是我大哥~~')" class="w-full bg-blue-600 text-white font-semibold py-2 rounded-lg hover:bg-blue-700 transition text-center">关于我</a>
      <a href="./projects.html" class="w-full bg-purple-600 text-white font-semibold py-2 rounded-lg hover:bg-purple-700 transition text-center">我的作品</a>
      <a href="#contact" onclick="alert('想要联系方式来207找我。小样~')" class="w-full bg-green-600 text-white font-semibold py-2 rounded-lg hover:bg-green-700 transition text-center">联系我</a>
    </div>

    <div class="flex justify-center space-x-4 pt-4">
      <a href="https://github.com/" target="_blank" class="text-gray-500 hover:text-gray-900 text-2xl" aria-label="GitHub">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.3-1.7-1.3-1.7-1.06-.73.08-.72.08-.72 1.17.08 1.79 1.2 1.79 1.2 1.04 1.78 2.73 1.27 3.4.97.11-.75.41-1.27.74-1.56-2.56-.29-5.26-1.28-5.26-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11.1 11.1 0 012.9-.39c.98 0 1.97.13 2.9.39 2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.23 2.75.11 3.04.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.41-5.27 5.7.42.36.79 1.08.79 2.18 0 1.57-.01 2.84-.01 3.23 0 .31.21.68.8.56C20.71 21.39 24 17.08 24 12c0-6.27-5.23-11.5-12-11.5z"/></svg>
      </a>
      <a href="mailto:your@email.com" class="text-gray-500 hover:text-gray-900 text-2xl" aria-label="Email">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 2v.01L12 13 4 6.01V6h16zm-16 12V8.99l7.88 6.99c.39.34.99.34 1.38 0L20 8.99V18H4z"/></svg>
      </a>
      <!-- 你可以继续添加其他社交链接 -->
    </div>
  </div>

</body>
</html>
